<template>
  <view class="page">
    <uni-nav-bar
      title="搜索"
      statusBar
      color="#333"
      left-icon="left"
      backgroundColor="#fff"
      showMenuButtonWidth
      leftWidth="auto"
      :border="false"
      @clickLeft="$tools.back"
    />
    <view class="content">
      <view class="d-flex-row-y-center mb-xl">
        <view class="search-bar">
          <uni-icons
            type="search"
            size="20"
            color="#aaa"
          />
          <input
            type="text"
            placeholder="茉莉奶绿"
            v-model="searchValue"
            placeholder-class="search-input-placeholder"
            class="text-base"
          />
        </view>
        <text
          class="text-base text-color"
          @tap="search"
        >
          搜索
        </text>
      </view>
      <view
        class="hot"
        v-if="!searchList.length"
      >
        <view
          v-for="(item, index) in hotKeywords"
          :key="index"
          class="hot-item"
        >
          <text>{{ item }}</text>
          <image
            src="/static/images/menu/hot.png"
            class="hot-item-icon"
            v-if="index < 2"
          />
        </view>
      </view>
      <view
        class="product-list"
        v-else
      >
        <view
          v-for="(item, index) in searchList"
          :key="index"
          class="product-item"
          @tap="toDetail(item)"
        >
          <image
            :src="item.productLogo"
            class="product-image"
          />
          <view class="product-info">
            <view>
              <view class="product-name">
                <view
                  class="product-name-text"
                  :style="{
                    maxWidth: item.cornerTag ? '250rpx' : '350rpx'
                  }"
                >
                  {{ item.productName }}
                </view>
                <view
                  v-if="item.cornerTag"
                  class="product-corner-tag"
                  :style="[getTagStyle(item.cornerTag)]"
                >
                  {{ item.cornerTag.content }}
                </view>
              </view>
              <view class="product-tags">
                <view
                  class="product-tag"
                  :style="[getTagStyle(tag)]"
                  v-for="(tag, tIdx) in item.productTags"
                  :key="tIdx"
                >
                  {{ tag.content }}
                </view>
              </view>
              <view class="product-desc">
                {{ getProductShortDesc(item.productDesc) }}
              </view>
            </view>
            <view class="product-price">
              <text>￥</text>
              <text class="mx-xs text-lg text-bold">
                {{ $tools.formatPrice(item.productPrice) }}
              </text>
              <text v-if="item.productSpecs.length">起</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex"
export default {
  data() {
    return {
      searchValue: "",
      hotKeywords: [
        "茉莉奶绿",
        "冰鲜柠檬茶",
        "草莓啵啵",
        "葡萄冰美式",
        "美式咖啡",
        "雪王雪顶咖啡",
        "珍珠奶茶"
      ],
      searchList: []
    }
  },
  computed: {
    ...mapState("menu", ["menus"]),
    getProductShortDesc() {
      return desc => desc.split("\n")[0]
    },
    getTagStyle() {
      return tag => ({
        backgroundColor: tag.bgColor,
        color: tag.fontColor
      })
    }
  },
  methods: {
    search() {
      this.searchList = []
      const searchText = this.searchValue.trim()
      if (!searchText) {
        return
      }
      this.menus.forEach(cate => {
        cate.products.forEach(product => {
          if (
            product.productName.indexOf(searchText) !== -1 &&
            this.searchList.findIndex(
              item => item.productId === product.productId
            ) === -1
          ) {
            this.searchList.push({
              ...product,
              productCategoryId: cate.productCategoryId
            })
          }
        })
      })
    },
    toDetail(item) {
      uni.navigateBack()
      uni.navigateTo({
        url:
          "/pages/menu-subs/product-detail?categoryId=" +
          item.productCategoryId +
          "&productId=" +
          item.productId
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  width: 750rpx;
  height: 100vh;
  background-color: #fff;
}

.content {
  padding: $uni-spacing-row-base;
}

.search-bar {
  flex: 1;
  height: 70rpx;
  display: flex;
  align-items: center;
  background: #f1f1f2;
  margin-right: $uni-spacing-row-base;
  border-radius: 35rpx;
  padding-left: 24rpx;
  color: $uni-text-color-grey;
  font-size: $uni-font-size-sm;
}

.search-input-placeholder {
  color: $uni-text-color-grey;
  font-size: $uni-font-size-sm;
}

.hot {
  display: flex;
  flex-wrap: wrap;
  &-item {
    height: 70rpx;
    display: flex;
    align-items: center;
    padding: $uni-spacing-row-base $uni-spacing-row-lg;
    background: #f3f3f3;
    color: $uni-text-color;
    font-size: $uni-font-size-base;
    margin-right: $uni-spacing-row-base;
    margin-bottom: $uni-spacing-row-base;
    border-radius: $uni-border-radius-lg;

    &-icon {
      width: 30rpx;
      height: 30rpx;
      margin-left: $uni-spacing-row-base;
    }

    &:nth-child(1),
    &:nth-child(2) {
      background: #fff8f8;
      color: $uni-color-primary;
    }
  }
}

.product-list {
  display: flex;
  flex-direction: column;
}

.product-item {
  display: flex;
  align-items: stretch;
  padding: $uni-spacing-row-base 0;
}

.product-image {
  flex-shrink: 0;
  width: 160rpx;
  height: 160rpx;
  margin-right: $uni-spacing-row-base;
}

.product-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: $uni-font-size-base;
  font-weight: 600;
  color: $uni-text-color;
  margin-bottom: $uni-spacing-row-sm;

  &-text {
    max-width: 300rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.product-corner-tag {
  font-size: $uni-font-size-sm;
  font-weight: 500;
  color: $uni-text-color;
  padding: $uni-spacing-row-xs;
  border-radius: $uni-border-radius-base;
  margin-left: $uni-spacing-row-sm;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-tags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: $uni-spacing-row-sm;
  margin-bottom: $uni-spacing-row-sm;
}

.product-tag {
  font-size: $uni-font-size-xs;
  font-weight: 500;
  color: $uni-text-color;
  padding: $uni-spacing-row-xs;
  border-radius: $uni-border-radius-lg;
}

.product-desc {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
}

.product-price {
  display: flex;
  align-items: center;
  color: $uni-text-color;
  font-size: $uni-font-size-sm;
}
</style>
